<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>

    <script>
        
        // 箭头函数。this没有调用者指向关系

        // let btn = document.querySelector('button');
        // 1.
        // // 在事件函数种，如果使用的是箭头函数，不要用this。
        // // 建议不要用了
        // btn.onclick = function(){
        //     // console.log(this);
        //     this.style.background = 'red';
        // }


        // let btns = document.querySelectorAll('button');

        // btns.forEach(item=>{
        //     item.onclick = function(){
        //         // this.style.background = 'red';
        //         setTimeout(()=>{
        //             console.log(this);
        //             this.style.background = 'red';
        //         },300);
        //     }
        // })


        //2.
        // function Person(){
        //     this.a = 12;
        //     this.b = 5;
        // }

        // let p1 = new Person();

        // console.log(p1);

        // Person is not a constructor 
        // 不允许箭头函数，实现构造函数。
        // let Person = ()=>{
        //     this.a = 12;
        //     this.b = 5;
        // }

        // let p1 = new Person();

        // console.log(p1);



        // 3.
        // function fn(){
        //     console.log(arguments);
        // }

        // fn(1,2,3);

        
        // arguments is not defined
        // 箭头函数中，没有arguments对象
        // 在箭头函数中，获取实参列表，使用...arg
        // let fn = (...arg)=>{
        //     // console.log(arguments);
        //     console.log(arg); //[1, 2, 3]
        // }

        // fn(1,2,3);



        // 4. 箭头函数无法改变this指向，不能使用call、apply、bind方法。
        // function fn(){
        //     console.log(this);
        // }
        

        // fn.call('a');

        // let fn2 = ()=>{
        //     console.log(this);
        // }

        // // console.log(this);

        // // 箭头函数中this不能被call、apply、bind修改。
        // fn2.call('b')

        


    </script>
</body>
</html>